<template>
    <div class="common siteMange">
        <innerCommon :location="location">
            <template slot="left">
                <span>院校列表</span>
                <a-select @change="statusChange" :allowClear="true" placeholder="审核状态" style='width:250px;margin-right:10px'>
                    <a-select-option 
                        :value="item.value" 
                        v-for="(item,index) in statusList" 
                        :key="index">
                        {{item.name}}
                    </a-select-option>
                </a-select>
                <a-input-search class="inputStyle" placeholder="请输入名称"  v-model="searchValue" enter-button @search="onSearch" />
            </template>
            <div slot="table">
                <topList
                    :topList="topList"
                    :currentItem="searchInfo.type"
                    @changeTop="changeTop"
                ></topList>
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" slot-scope="index,record"> 
                        <span v-if="record.status==0" style="color:orange">未审核</span>
                        <span v-else-if="record.status==1" style="color:green">已通过</span>
                        <span v-else style="color:red">未通过</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="todetail(record.id)">查看详情</span>
                        <span v-if="record.status!=1" @click="isPass(1,record.id)">通过</span>
                        <span v-if="record.status!=2" @click="isPass(2,record.id)">不通过</span>
                        <confirmBox
                            @handleOk="deleteSite(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.name"
                            :noticeType="'站点'"
                        ></confirmBox>
                    </div>
                </a-table>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import innerCommon from "@/components/common/innerCommon"
import topList from "@/components/common/topList"
import confirmBox from "@/components/common/confirmBox"
import {
    getSiteListApi,
    updateSiteStatusApi,
    deleteSiteApi,
} from "@/request/api"
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '单位名称',
        dataIndex: 'name',
    },{
        title: '单位属性',
        dataIndex: 'role',
    },{
        title: '审核人',
        dataIndex: 'publisher',
    },{
        title: '申请时间',
        dataIndex: 'createTime',
    },{
        title: '审核状态',
        scopedSlots: { customRender: 'status' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]
export default {
    name:"viewSign",
    components:{innerCommon,topList,confirmBox},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        if(this.$route.query.type){
            this.searchInfo.type=this.$route.query.type
        }
        this.searchInfo.examId=this.$route.query.examId
        this.location=[
            {name:'1+X管理',path:''},{name:'站点管理',path:'/siteManage'}
        ]
        this.init()
    },
    data(){
        return{
            columns,
            location:[],
            searchValue:'',
            topList:[
                {
                    name:"试点院校",
                    id:0
                },{
                    name:'考核站点',
                    id:1
                },{
                    name:'管理站点',
                    id:2
                }
            ],
            list:[],
            pagination:{total:0,pageSize:10,current:1},
            searchInfo:{
                type:0,
                page:1,
                pageSize:10,
                keyword:'',
                status:'',
            },
            statusList:[
                {'name':'未审核','value':0},
                {'name':'已通过','value':1},
                {'name':'已拒绝','value':2},
            ]
        }
    },
    methods:{
        init(){
            this.getToken(getSiteListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({
                    ...item.institute,
                    ...item,
                    index:(this.searchInfo.page-1)*10+index+1
                }))
                this.pagination.total=res.data.count
            })
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.init()
        },
        changeTop(data){
            this.searchInfo.type=data
            this.init()
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        // 删除
        deleteSite(id){
            this.getToken(deleteSiteApi,{'applyId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        isPass(type,id){
            this.getToken(updateSiteStatusApi,{'applyId':id,'status':type},data=>{
                this.$message.success(data.message)
                this.init()
            })
        },
        statusChange(data){
            this.searchInfo.status=data
            this.init()
        },
        todetail(id){
            this.$router.push({path:'/siteDetail',query:{id,type:this.searchInfo.type}})
        }
    }
}
</script>
<style lang="stylus">
.siteMange{
    .innerCommon{
        .content{
            margin-top:77px;
            position:relative;
        }
    }
    .tableWrapUl{
        position:absolute;
        top:-60px;
        left:0;
    }
}
</style>